<!-- 文档和教程 -->
<section id="docs" class="py-20 bg-white">
  <div class="container mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center max-w-3xl mx-auto mb-16">
      <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-4">项目文档</h2>
      <p class="text-dark/70 text-lg">丰富的学习资源帮助你快速掌握 Snow 的使用方法</p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
      <!-- 入门指南 -->
      <div class="bg-light rounded-xl overflow-hidden shadow-md hover:shadow-lg transition-custom">
        <div class="h-48 overflow-hidden">
          <img src="sections/images/document.png" alt="入门指南"
                class="w-full h-full object-cover transition-transform hover:scale-105 duration-500">
        </div>
        <div class="p-6">
          <h3 class="text-xl font-semibold mb-3">入门指南</h3>
          <p class="text-dark/70 mb-4">适合初学者的教程，从安装到基本使用，带你快速上手 Snow。</p>
          <a href="#" class="inline-flex items-center text-primary font-medium hover:underline">
                开始学习 <i class="fa fa-arrow-right ml-2"></i>
          </a>
        </div>
      </div>

      <!-- 项目历程 -->
      <div class="bg-light rounded-xl overflow-hidden shadow-md hover:shadow-lg transition-custom">
        <div class="h-48 overflow-hidden">
          <img src="sections/images/develop.png" alt="项目历程"
                class="w-full h-full object-cover transition-transform hover:scale-105 duration-500">
        </div>
        <div class="p-6">
          <h3 class="text-xl font-semibold mb-3">项目历程</h3>
          <p class="text-dark/70 mb-4">详细的项目开发历程，包括项目背景、功能介绍、技术实现等。</p>
          <a href="#" class="inline-flex items-center text-primary font-medium hover:underline">
                查看文档 <i class="fa fa-arrow-right ml-2"></i>
          </a>
        </div>
      </div>

      <!-- Git贡献规范 -->
      <div class="bg-light rounded-xl overflow-hidden shadow-md hover:shadow-lg transition-custom">
        <div class="h-48 overflow-hidden">
          <img src="sections/images/gitee.png" alt="Git贡献规范"
                class="w-full h-full object-cover transition-transform hover:scale-105 duration-500">
        </div>
        <div class="p-6">
          <h3 class="text-xl font-semibold mb-3">Git贡献规范</h3>
          <p class="text-dark/70 mb-4">遵循一致的代码风格和提交规范，以便于团队协作和代码审查。</p>
          <a href="#" class="inline-flex items-center text-primary font-medium hover:underline">
                深入学习 <i class="fa fa-arrow-right ml-2"></i>
          </a>
        </div>
      </div>
    </div>

    <!-- 快速开始 
        <div class="mt-16 bg-primary/5 rounded-xl p-8 border border-primary/20">
          <h3 class="text-2xl font-semibold mb-6">快速开始</h3>
          <div class="bg-dark rounded-lg p-4 text-white font-mono text-sm overflow-x-auto">
            <pre># 安装 Snow
npm install snow --save

# 引入 Snow
const snow = require('snow');

# 基本使用
const result = snow.process('Hello, World!');
console.log(result);</pre>
          </div>
          <div class="mt-6">
            <a href="#"
              class="inline-flex items-center px-6 py-3 bg-primary text-white rounded-md hover:bg-primary/90 transition-custom shadow-md">
              查看完整教程 <i class="fa fa-book ml-2"></i>
            </a>
          </div>
        </div>-->
  </div>
</section>